import { formatMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { Button, Input, Modal, Table } from 'antd';
import { getAnswerAllList } from '@/services/knowledgemanagement';
import styles from './editingStyle.less';
import RcViewer from '@hanyk/rc-viewer';

class ReferAnswerModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: true,
      records: [],
      total: 0,
      current: 1,
      size: 10,
      search: '',
      openType: 'noSlot'
    }
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  /**
   * 打开弹窗
   */
  openModal = (type) => {
    this.setState({ visible: true, openType: type }, () => {
      this.getReferList();
    })
  }

  /**
   * 获取引用答案列表
   */
  getReferList = () => {
    this.setState({ loading: true }, async () => {
      const { current, size, search } = this.state;
      const res = await getAnswerAllList({ current, size, search });
      this.setState({
        total: res.total,
        loading: false,
        records: res.records
      })
    })

  }

  /**
   * 模糊查询
   */
  queryByConditions = (search) => {
    this.setState({ search }, () => {
      this.getReferList();
    })
  }

  /**
   * 分页查询
   */
  queryByPages = (current,size) => {
    this.setState({ current,size }, () => {
      this.getReferList();
    })
  }

  /**
   * 选择引用答案
   */
  doSelect = (row) => {
    const { openType } = this.state;
    this.props.setReferAnswer(row, openType);
  }

  /**
   * 关闭弹窗
   * @returns {*}
   */
  cancelModal = () => {
    this.setState({
      visible: false,
      openType: 'noSlot'
    })
  }

  changeSearch = (e) => {
    this.setState({
      search:e.target.value
    })
  }

  render() {
    const { visible, total, records, loading, current,search,size } = this.state;
    const columns = [
      {
        title: formatMessage({ id: 'knowledgeManagement.referAnswerModal.answerTitle' }),
        dataIndex: 'question',
        width: 150,
        render: (text) => {
          const newText = text.length > 20 ? text.substring(0, 20) : text
          return <div title={text}>{newText}</div>
        }
      },
      {
        title: formatMessage({ id: 'knowledgeManagement.referAnswerModal.answerContent' }),
        dataIndex: 'answer',
        width: 250,
        render: (text, row) => {
          return <RcViewer><div className={styles.tableAnswerContent} dangerouslySetInnerHTML={{ __html: row.answer }} style={{ maxHeight: 200, overflow: 'auto' }} /></RcViewer>
        }
      },
      {
        title: formatMessage({ id: 'knowledgeManagement.referAnswerModal.action' }),
        width: 100,
        render: (text, row) => {
          return <Button type={'link'} size={'small'} onClick={() => this.doSelect(row)}>{formatMessage({ id: 'knowledgeManagement.referAnswerModal.refer' })}</Button>
        }
      },
    ]
    return (
      <div>
        <Modal
          title={formatMessage({ id: 'knowledgeManagement.referAnswerModal.title' })}
          visible={visible}
          onCancel={this.cancelModal}
          footer={null}
          zIndex={2000}
          wrapClassName="referAnswerStyle"
          width={'60vw'}
        >
          <div>
            <Input.Search value={search} onChange={this.changeSearch} style={{width:300,marginRight:10}} placeholder={formatMessage({ id: 'knowledgeManagement.referAnswerModal.searchPlaceholder' })} onSearch={this.queryByConditions} />
            <Button type='primary' onClick={() => this.queryByConditions(search)}>{formatMessage({ id: 'knowledgeManagement.referAnswerModal.query' })}</Button>
          </div>
          <div style={{ marginTop: 20 }}>
            <Table
              columns={columns}
              dataSource={records}
              loading={loading}
              rowKey={'id'}
              scroll={{ y: 400 }}
              pagination={{
                total,
                current,
                onChange: this.queryByPages,
                showQuickJumper:true,
                showSizeChanger:true,
                onShowSizeChange:this.queryByPages,
                pageSize:size
              }}
            />
          </div>
        </Modal>
      </div>
    );
  }
}

export default ReferAnswerModal;
